<template>
  <div class="pay-bg-transparent">
    <div class="masker" @click="backHandle"></div>
    <div class="c-w100 c-bg-white c-fc-xblack c-br-tl20 c-br-tr20">
      <div class="c-flex-row c-flex-row c-flex-center c-mt20 c-ph24">
        <i class="iconfont c-fc-sgray c-fs16 vis-hidden-important">&#xe61b;</i>
        <span class="c-flex-grow1 c-w0 c-fs28 c-textAlign-c c-fw600">请输入交易密码</span>
        <i class="iconfont c-fs20 c-c-fc-gray" @click="backHandle">&#xe61b;</i>
      </div>
      <div v-if="price" class="c-fw600 c-textAlign-c c-mt30 c-pt10">
        <span class="c-fs40">￥</span>
        <span class="c-fs64">{{getPriceText(price)}}</span>
      </div>
      <div class="c-flex-row c-flex-center c-mt40">
        <div class="c-hh80 c-ww80 c-br16 c-flex-row c-flex-center c-mh8 c-bg-f6" :class="index == password.length ? 'theme-bd1' : ''" v-for="(i,index) in items" :key="index">
          <span class="c-ww20 c-hh20 c-bg-black c-br50" v-if="password[i]"></span>
        </div>
      </div>
      <div class="c-textAlign-r c-fs24 c-mt20 c-fc-sblack c-mr40" @click="goPwd">忘记密码</div>

      <div class="c-mt40 c-w100 c-bg-white c-flex-row c-flexw-wrap">
        <!-- 键盘1-9 -->
        <div @click="keyUpHandle(val)" v-for="(val,index) in keys" :key="index" class="number-item">
          {{val}}
        </div>
        <!-- 键盘空 -->
        <div class="number-item not-number"></div>
        <!-- 键盘0 -->
        <div @click="keyUpHandle('0')" class="number-item">0</div>
        <!-- 键盘删除 -->
        <div @click="keyUpHandle('x')" class="number-item not-number">
          <i class="iconfont c-fc-sblack c-fs28">&#xe818;</i>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
const keys = () => ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
// let sendFlag = true // 防止重复发送密码
export default {
  props: {
    price: { // 当前需要支付的价格
      type: String,
      default: '',
    },
  },
  data() {
    return {
      items: [0, 1, 2, 3, 4, 5],
      keys: keys(),
      password: []
    };
  },
  activated() {
    this.password = [];
  },
  methods: {
    getPriceText(price) { // 显示两位小数
      if (!price) {
        return '0.00'
      }
      const tempPriceStr = `${price}`
      const decimalStr = tempPriceStr.split('.')[1] || ''
      return decimalStr.length == 0 ? (tempPriceStr + '.00') : decimalStr.length == 1 ? (tempPriceStr + '0') : tempPriceStr
    },
    goPwd() {
      this.$routerGo(this, "push", { path: "/member/scholarship/updatePassword" });
    },
    backHandle() {
      this.password = [];
      this.$emit("hidePwd"); // 返回上级
    },
    keyUpHandle(text) {
      if (!text || (text == 'x' && this.password.length <= 0) || this.password.length >= 6) {
        return;
      }
      if (text == 'x') {
        this.password.pop();
        return;
      }
      this.password.push(text);

      if (this.password.length >= 6) {
        this.$emit("confirmPwd", this.password.join(" ").replace(/\s/g, ""));
        setTimeout(() => {
          this.password = [];
        }, 100);
      }
    },
  }
};
</script>

<style  scoped>
.hh96{
  height: 2.4rem;
}
.mt60{
  margin-top: 1.5rem;
}
.mh35{
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.pay-bg-transparent {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1004;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 16rem;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.3);
}
.masker {
  flex-grow: 1;
  filter: alpha(opacity=30);
  /* background-color: rgba(0, 0, 0, 0.3); */
}
.number-item{
  width: 33.333333333333%;
  height: 2.5rem;
  border-top: 1px solid #f6f6f6;
  border-left: 1px solid #f6f6f6;
  font-size: 1.2rem;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.number-item:active {
  background-color: #f6f6f6;
}
.not-number{
  background-color: #f6f6f6;
}
</style>